﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //关闭页面之前的事件
//        window.onbeforeunload= function() {
//            alert("确定要退出该页面吗？");
        //        }
        //键盘事件
        window.onload= function (){
            document.getElementById('dv1').onclick= function() {
                if (window.event.shiftKey) {
                    document.getElementById('dv1').innerHTML = "<span>SHIFT</span>";
                } else if(window.event.altKey){
                    document.getElementById('dv1').innerHTML = "<span>ALT</span>";
                } else if (window.event.ctrlKey) {
                    document.getElementById('dv1').innerHTML = "<span>CTRL</span>";
                } else {
                    document.getElementById('dv1').innerHTML = "<span>NORMAL</span>";
                }
            }
            document.getElementById('dv1').onmousemove = function () {
                 //相对于页面的坐标
                //document.getElementById('sp1').innerHTML = window.event.clientX + ',' + window.event.clientY
                //相对于屏幕的坐标
                //document.getElementById('sp1').innerHTML = window.event.screenX + ',' + window.event.screenY;
                //相对于元素的坐标
                document.getElementById('sp1').innerHTML = window.event.offsetX + ',' + window.event.offsetY;
            }
        }
    </script>
    <style type="text/css">
        .dv1 {
            border: 2px;
            color: black;
            background-color: pink;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
    <body>
        <span id="sp1"></span>
        <div id="dv1" class="dv1">
        
        </div>
    </body>
</html>
